<template>
  <view class="index">
    <sv-scan-code
      ref="scanRef"
      :uid="scanList[0].uid"
      v-model:value="scanList[0].value"
      :focus="scanList[0].focus"
      placeholder="数字控件"
      @changeFocus="changeScanFocus"
      @changeInput="changeScanInput"
      @onConfirm="onConfirm"
      @handleCode="handleScanCode"
    ></sv-scan-code>
    <view class="custom">
      <button @click="onNext">下一页</button>
    </view>
    <sv-scan-code
      :uid="scanList[1].uid"
      v-model:value="scanList[1].value"
      :focus="scanList[1].focus"
      placeholder="字母控件"
      @changeFocus="changeScanFocus"
      @changeInput="changeScanInput"
      @onConfirm="onConfirm"
      @handleCode="handleScanCode"
    ></sv-scan-code>
    <view class="custom">自定义内容</view>
    <sv-scan-code
      :uid="scanList[2].uid"
      v-model:value="scanList[2].value"
      :focus="scanList[2].focus"
      placeholder="其他控件"
      @changeFocus="changeScanFocus"
      @changeInput="changeScanInput"
      @onConfirm="onConfirm"
      @handleCode="handleScanCode"
    ></sv-scan-code>
    <view class="custom">当前控件：{{ curScanID }}</view>
    <view class="custom">
      实时内容：
      <view v-for="item in scanList" :key="item.uid">{{ item.uid }}: {{ item.value }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 控件列表
      scanList: [
        { uid: 'scan-number', value: '', focus: true },
        { uid: 'scan-letter', value: '', focus: false },
        { uid: 'scan-other', value: '', focus: false }
      ]
    }
  },
  computed: {
    // 当前控件id
    curScanID: {
      set(newVal) {
        this.scanList.forEach((item) => {
          item.focus = item.uid === newVal
        })
      },
      get() {
        const focusScan = this.scanList.find((item) => item.focus)
        return focusScan.uid
      }
    }
  },
  onShow() {
    console.log('==== onShow ====')
    this.$nextTick(() => {
      // 页面渲染完成时需要初始化激光
      this.$refs.scanRef.initLaser()
    })
  },
  onHide() {
    console.log('==== onHide ====')
    // 页面卸载时需要销毁激光
    this.$refs.scanRef.destroyLaser()
  },
  methods: {
    // 聚焦
    changeScanFocus(e) {
      // 将当前聚焦控件赋值给curScanID
      this.curScanID = e.uid
    },
    changeScanInput(e) {
      console.log('==== changeScanInput :', e)
    },
    onConfirm(e) {
      console.log('==== onConfirm :', e)
    },
    handleScanCode(e) {
      console.log('==== handleScanCode :', e)
      const { uid, value, mode } = e
      /**
       * 自定义处理扫描结果
       */
      if (/^\d+$/.test(value)) {
        // 判断是否为纯数字
        this.curScanID = 'scan-number'
        this.scanList[this.findControlByID(this.curScanID)].value = value
        // 如果为数字，下次就为字母
        this.curScanID = 'scan-letter'
      } else if (/^[A-Za-z]+$/.test(value)) {
        // 判断是否为纯字母
        this.curScanID = 'scan-letter'
        this.scanList[this.findControlByID(this.curScanID)].value = value
        // 如果为字母，下次就为数字
        this.curScanID = 'scan-number'
      } else {
        // 否则为其他
        this.curScanID = 'scan-other'
        this.scanList[this.findControlByID(this.curScanID)].value = value
        // 为其他后，重新再从数字开始
        this.curScanID = 'scan-number'
      }
    },
    findControlByID(uid) {
      return this.scanList.findIndex((item) => item.uid === uid)
    },
    onNext() {
      uni.navigateTo({ url: '/pages/next/next' })
    }
  }
}
</script>

<style lang="scss">
.index {
  padding: 24rpx;
  box-sizing: border-box;

  .custom {
    height: 200rpx;
    background-color: #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 24rpx 0;
  }
}
</style>
